<template>
    <view>
		<view>
			<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange" textFlex></wuc-tab>
		</view>
        <mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
            :up="upOption">
            <view class="daochu-box">
                <view class="xunjian-list" v-for="(item,index) in dataList" :key="index">
                    <view class="xunjian-flex" @tap="goto_detail(item)">
                        <view class="xunjian-title xunjian-title-top"><view style="flex: 1;">{{item.plan_name}}</view>
						<view class="xunjian-title-r">
							<text v-if="item.status == 0" class="pub-blue">进行中</text>
							<text v-if="item.status == 1" class="pub-green">已巡检</text>
							<view class="iconfont icon-youjiantou"></view>
						</view></view>
						<view class="xunjian-b">
							<view>任务周期：<text class="xunjian-blue">{{item.begintime}} {{item.endtime == '' ? '- 长期' : item.begintime == item.endtime ? '' : '- '+item.endtime}}</text></view>
							<view>周期：每{{item.circle_type == 1 ? '日' : item.circle_type == 2 ? '周' : '月'}}巡检</view>
							<view>时间：<text class="xunjian-time">{{item.times}}</text></view>
							
						</view>
                    </view>
                </view>
            </view>
        </mescroll-body>
		<uniFab ref="fab" :content="content" @trigger="trigger" @fabClick="fabClick"></uniFab>
    </view>
</template>

<script>
	import uniFab from'@/components/uni-fab'
    import {mapState} from 'vuex';
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
				TabCur: 0,
				type: 1,
				tabList: [
					// type  1今日 2全部 3历史
					{
						name: '今日巡检',
						type: '1'
					},{
						name: '全部巡检',
						type: '2'
					},
					{
						name: '巡检记录',
						type: '3'
					}
				],
				
                dataList: [],
                mescroll: null, //mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的常用配置
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的常用配置
                upOption: {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 20 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
				content:[{
					iconPath: '/static/img/home-con02.png',
					selectedIconPath: '/static/img/home-con2.png',
					text: '创建工单',
					active: false
				},{
					iconPath: '/static/img/home-con01.png',
					selectedIconPath: '/static/img/home-con1.png',
					text: '扫码',
					active: false
				},{
					iconPath: '/static/img/home-con03.png',
					selectedIconPath: '/static/img/home-con3.png',
					text: '刷新',
					active: false
				}]
            }
        },
        onShow() {
            if (this.userInfo.token == undefined) {
                this.loginOut();
            } else {
                this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
                this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
            }
        },
		onHide() {
			this.$refs.fab.close();
		},
		components:{
			WucTab,uniFab
		},
        computed: {
            ...mapState(['userInfo']),
        },
        methods: {
			trigger(e) {
				let that = this
				if(e.index == 0){
					uni.navigateTo({
						url:'/pages/workOrder/createOrder'
					})
				}else if(e.index == 1){
					// 只允许通过相机扫码
					uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
							let code = res.result;
							uni.navigateTo({
								url:'/pages/xunjian/index?code=' + code
							})
						}
					});
				}else if(e.index == 2){
					this.mescroll.resetUpScroll()
				}
			},
			tabChange(index) {
				this.dataList = [];
				// this.resetData();
				this.TabCur = index;
				this.type = this.tabList[index].type;
				this.mescroll.resetUpScroll(false)
			},
            loginOut() {
                this.$lib.$store.commit('clearUserInfo')
                uni.reLaunch({
                    url: '/pages/login/index'
                })
            },
            /*上拉加载的回调*/
            async upCallback(page, item) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.route,
                    data: {
                        page: pageNum,
                        limit: pageSize,
						type:this.type
                    },
                    needLogin: true
                })
                if (res.code == 1) {
                    // console.log(res)
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage =Math.ceil(totalSize/pageSize);
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.length;
                    // 接口返回的是否有下一页 (true/false)
                    // let hasNext = data.xxx;
                    this.mescroll.endBySize(curPageLen, totalSize);

                    //设置列表数据
                    if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
                    this.dataList = this.dataList.concat(curPageData); //追加新数据
                } else {
                    this.mescroll.endErr()
                }
            },
            goto_detail(item) {
				let url = ''
				if(this.type == 2){
					url = '/pages/xunjian/planInfo?id=' + item.id
				}else{
					url = '/pages/xunjian/projectInfo?id=' + item.id
				}
                uni.navigateTo({
                    url: url
                })
            }
        },
    }
</script>

<style>
    page {
        background: #f5f5f5;
    }

    .daochu-box {
        font-size: 16px;
        padding-top: 14px;
    }

    .xunjian-list {
		padding: 14px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 5px;
		box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
		width: 93%;
		margin: 0 auto;
		margin-bottom: 14px;
	}

    .xunjian-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 16px;
        flex: 1;
    }
	.xunjian-title {
		display: flex;
		align-items: center;
		padding: 0 14px;
		font-size: 14px;
	}
	.xunjian-title-top  {
		border-bottom: solid 1px #f3f3f3;
		margin-bottom: 10px;
		padding-bottom: 14px;
		font-size: 16px;
		justify-content: space-between;
	}
	.xunjian-b{
		width: 92%;
		margin: 0 auto;
		font-size: 14px;
		line-height: 24px;
	}
    .xunjian-time {
        color: #9b9b9c;
    }
	.xunjian-blue {
		color: #313131;
		font-weight: bold;
	}
	.uni-fab__content--other-platform{
		box-shadow:none!important;
	}
	.xunjian-title-r {
		font-size: 14px;
		display: flex;
		align-items: center;
	}
	.xunjian-title-r text{margin-right: 4px;}
	.xunjian-title-r .iconfont{
	    font-size: 14px;
	}
</style>